<template>
  <view class="flex-1">
    <!-- #ifdef MP-WEIXIN -->
    <customNav color="#ffffff" title="热销飞机询价表单"></customNav>
    <view
      class="bg-header px-[38rpx] pb-[74rpx] pt-[34rpx]"
      :style="{ paddingTop: navHeight * 2 + 34 + 'rpx' }"
    >
      <view class="text-white text-[48rpx] leading-[56rpx]"
        >请提交您的询价信息</view
      >
      <view class="text-white text-xs leading-5 mt-2">
        <view>我们的工作人员将在2小时内与您联系</view>
        <view class="pt-1">（北京时间9:00-20:00）</view>
      </view>
    </view>
    <!-- #endif -->
    <view class="px-5 -mt-[204rpx]">
      <view
        class="bg-theme px-[30rpx] pt-[20rpx] flex justify-between items-start rounded-xl h-16"
      >
        <view class="flex items-center pl-[20rpx]">
          <image src="@/static/hot-air.png" class="w-5 h-5 mt-[6rpx]"></image>
          <view class="text-xl text-white pl-[14rpx]">飞机信息</view>
        </view>
        <view class="text-white text-xl font-medium">{{ title }}</view>
      </view>
      <view class="bg-white rounded-xl p-5 mt-[-40rpx]">
        <view class="mb-[30rpx]">
          <view class="pb-[20rpx] text-[#4B535A] text-base"
            ><text class="text-[#F62427] text-base">* </text> 联系人</view
          >
          <up-input
            :customStyle="customStyle"
            placeholder="请输入联系人"
            border="surround"
            clearable
            v-model="form.contactor"
          ></up-input>
        </view>
        <view class="mb-[30rpx]">
          <view class="pb-[20rpx] text-[#4B535A] text-base"
            ><text class="text-[#F62427] text-base">* </text>联系电话</view
          >
          <up-input
            type="number"
            :customStyle="customStyle"
            placeholder="请输入联系电话"
            border="surround"
            clearable
            v-model="form.phone"
          ></up-input>
        </view>
        <view class="mb-[30rpx]">
          <view class="pb-[20rpx] text-[#4B535A] text-base">公司名称</view>
          <up-input
            :customStyle="customStyle"
            placeholder="请输入公司名称"
            border="surround"
            clearable
            v-model="form.company"
          ></up-input>
        </view>
        <view class="">
          <view class="pb-[20rpx] text-[#4B535A] text-base">备注信息</view>
          <up-textarea
            v-model="form.note"
            height="100"
            placeholder="请输入备注信息"
            border="surround"
          ></up-textarea>
        </view>
      </view>
    </view>
    <view class="w-full bottom-0 px-[30rpx] pt-10 pb-[40rpx]">
      <view
        @click="submit"
        class="bg-theme rounded w-full font-medium text-lg text-white h-[90rpx] leading-[90rpx] text-center"
      >
        提交询价
      </view>
    </view>
    <up-overlay :show="show">
      <view
        class="flex flex-col items-center h-full justify-center pb-10"
        @click.stop
      >
        <view
          class="w-[530rpx] h-[718rpx] bg-white rounded-[20rpx] pt-[56rpx] px-5 pb-6 flex flex-col items-center"
        >
          <view class="font-medium text-base text-black">提交成功</view>
          <view
            class="text-xs text-[#4C4C4] leading-5 text-center px-1 mt-[30rpx]"
          >
            <view>工作人员将在2小时内与您联系 </view>
            <view>（北京时间9:00-20：00），</view>
            <view> 也可通过下方微信二维码添加工作人员。</view>
          </view>
          <image
            show-menu-by-longpress
            :src="weChatImg"
            class="w-[360rpx] h-[360rpx]"
            mode="widthFix"
          ></image>
          <view class="text-[#858585] text-base leading-4 mt-2"
            >长按识别二维码</view
          >
        </view>
        <image
          @click="ugoBack"
          src="@/static/close.png"
          class="w-8 h-8 mt-5"
        ></image>
      </view>
    </up-overlay>
  </view>
</template>

<script setup lang="ts">
import { saveSaleQuote_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { onPageScroll, onLoad } from "@dcloudio/uni-app";
onPageScroll((e) => {});
const customStyle = computed(() => ({
  height: "84rpx",
}));

const show = ref(false);
const title = ref("");
const form = reactive({
  id: "",
  contactor: "",
  phone: "",
  company: "",
  note: "",
});

const weChatImg = ref("");
const submit = () => {
  if (!form.contactor)
    return uni.showToast({ title: "请输入联系人", icon: "none" });
  if (!form.phone)
    return uni.showToast({ title: "请输入联系电话", icon: "none" });
  if (form.phone && !uni.$u.test.mobile(form.phone))
    return uni.showToast({ title: "请输入正确的手机号", icon: "none" });

  uni.showLoading();
  saveSaleQuote_api(form)
    .then((res) => {
      show.value = true;
      weChatImg.value = res.qr_img;
    })
    .finally(() => {
      uni.hideLoading();
    });
};
const ugoBack = () => {
  uni.navigateBack();
};
onLoad(({ id, name }) => {
  form.id = id;
  title.value = name;
});

// #ifdef MP
const systemInfo = uni.getSystemInfoSync();
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;
// #endif
</script>

<style lang="scss" scoped>
:deep(.u-border) {
  border-color: #eceff4 !important;
}
.bg-header {
  background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/fly-4.png");
  width: 100%;
  height: 676rpx;
  background-size: 100% 100%;
}
</style>
